<template>
  <div class="AddUserManage" style="display:flex;flex-direction:column">
     <el-card class="title-card">
         <div slot="header">
            <span style="color:#8497b3">添加房源</span>
      </div>
     </el-card>
   <el-card style="margin-top:5px;flex:1" class="content-card">
     <el-form 
      ref="form" :model="form" :rules="rules"
      label-width="100px" style="width:550px;max-height:600px;">
      
      <el-form-item label="编号" prop="id">
        <el-input v-model="form.id"></el-input>
      </el-form-item>

      <el-form-item label="房源标号" prop="houseid">
        <el-input v-model="form.houseid"></el-input>
      </el-form-item>
     
     <el-form-item label="状态" prop="state">
        <el-input v-model="form.state"></el-input>
      </el-form-item>

      <el-form-item label="房源类型" prop="type">
        <el-input v-model="form.type"></el-input>
      </el-form-item>

      <el-form-item label="单位价格" prop="price">
        <el-input v-model="form.price"></el-input>
      </el-form-item>

      <el-form-item label="总面积" prop="area">
        <el-input v-model="form.area"></el-input>
      </el-form-item>

      <el-form-item label="操作员" prop="operate">
        <el-input v-model="form.operate"></el-input>
      </el-form-item>

      <el-form-item label="创建日期" prop="createtime">
        <el-input v-model="form.createtime"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submit">立即新增</el-button>
        <el-button @click="reset">取消</el-button>
      </el-form-item>
    </el-form>
   </el-card>
   
    
  </div>
</template>

<script>
import axios from 'axios';



export default {
  data() {
    return {
      form: {
        id:"",
      houseid:"",
      state:"",
      type:"",
      price:"",
      area:"",
      operate:"",
      createtime:"",
      },
      rules:{
        id: [{required:true, message:'必填', trigger:'blur'}],
        houseid: [{required:true, message:'必填', trigger:'blur'}],
        state: [{required:true, message:'必填', trigger:'blur'}],
        type: [{required:true, message:'必填', trigger:'blur'}],
        price: [{required:true, message:'必填', trigger:'blur'}],
        area: [{required:true, message:'必填', trigger:'blur'}],
        operate: [{required:true, message:'必填', trigger:'blur'}],
        createtime: [{required:true, message:'必填', trigger:'blur'}],
      }
    }
  },
  methods: {
    /**提交信息 */
  submit() {
      this.$refs['form'].validate(async(valid)=>{
        if(valid){
           let data = await axios.post("housingresources",this.form)
         console.log(data);
         //重置表单
         this.$message({
          message:"添加成功",
          type:'success'
         })
         this.reset()
         this.$router.push('/component/housemanage')
        }else{
          console.log('失败');
        }
      })
      
    
    },

   reset(){
     this.$refs['form'].resetFields()
   }

    
  },
};
</script>

<style scoped>
.AddUserManage :deep .el-form-item__label{
  min-width: 100px;
}
.el-form-item__label{
min-width: 70px;
}
.AddUserManage .title-card /deep/ .el-card__body {
  display: none;
}
</style>



